<template>
  <ul class="picText-content">
    <li v-for="item in shopList.list">
      <div class="pic">
        <van-image width="100%" height="100%" :src="item.shopLogo" />
      </div>
      <div class="text-content">
        <h4>{{ item.shopname }}</h4>
        <div class="tagList">
          <span>月售{{ item.saleroom }}+</span>
          <span>起送¥{{ item.sendStartMoney }}</span>
          <span>基础运费¥{{ item.freight }}</span>
        </div>
        <p class="activity-text">
          {{ item.activity }}
        </p>
        <div class="pic-context" v-if="isShowPic">
          <div v-for="commodity in item.commodityList" class="pic-context-item"  ref="picRef">
            <div class="pic">
              <van-image
                :width="picHeight"
                :height="picHeight"
                :src="commodity.commodityPic"
                @load="onPicLoad"
								
              />
            </div>
            <div class="name">
              {{ commodity.commodityName }}
              {{ commodity.commodityweight ? commodity.commodityweight : '' }}
              {{ commodity.commoditySpecification ? '/' + commodity.commoditySpecification : '' }}
            </div>
            <div class="price">
              <em>¥</em>{{ commodity.commodityDiscount }}
              <span v-if="commodity.commodityPrice">¥{{ commodity.commodityPrice }}</span>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>
<script lang="ts" setup>
import { IShopList } from '@/typeings/home'
import { computed, ref, onMounted } from 'vue'

const props = defineProps<{
  shopList: {
    hasMore: boolean //有没有更多数据
    loading: boolean //默认没有正在加载
    offset: number
    limit: number
    list: Array<IShopList>
  }
  isShowPic: boolean
}>()
const shopList = computed(() => props.shopList)
const isShowPic = props.isShowPic
const picRef = ref<HTMLDivElement | null>(null)
const picHeight = ref(80)
const onPicLoad = (e: any) => {
  picHeight.value = e.path[2].offsetWidth
}
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
@import '@/styles/mixins.scss';
.picText-content {
  li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;

    & > .pic {
      flex: 0 0 56px;
      height: 56px;
    }
    .text-content {
      display: flex;
      flex-direction: column;
      justify-self: start;
      margin-left: 16px;
      color: $content-font-color;
      width: 100%;
      overflow: hidden;
      margin-bottom: 5px;

      h4 {
        font-weight: normal;
        margin: 8px 0;
        line-height: 22px;
        font-size: $fnSize16;
      }
      .tagList {
        span {
          font-size: $fnSize12;
          line-height: 18px;
          margin-right: 16px;
        }
        margin-bottom: 8px;
      }
      p.activity-text {
        color: $red-font-color;
        font-size: $fnSize12;
        line-height: 18px;
        margin: 0px;
      }
    }
    .pic-context {
      width: 100%;
      box-sizing: border-box;
      margin-right: 15px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      @include thinBorder();
      .pic-context-item {
        display: flex;
        flex-direction: column;
        width: 29.5%;
        padding-bottom: 12px;
        margin-right: 15px;
        &:last-child {
          margin-right: 0px;
        }
        .pic {
          width: 100%;
        }
        .name {
          font-size: $fnSize12;
          line-height: 28px;
          color: $content-font-color;
          @include ellipsis();
        }

        .price {
          color: $red-font-color;
          line-height: 20px;
          em {
            font-size: $fnSize12;
            transform: scale(0.7);
            font-style: normal;
          }
          span {
            font-size: $fnSize12;
            transform: scale(0.7);
            color: $secondary-font-color;
            text-decoration: line-through;
          }
        }
      }
    }
  }
}
</style>
